<template>
  <div class="home">
    <!--    <img alt="Vue logo" src="../assets/logo.png">-->
    <!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <button @click="print()">打印</button>
    <div id="viewer"></div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { setRenderPageWidth, parseOfdDocument, renderOfd, onWebassemblyRuntimeInitialized, OFDPrintApi } from 'ofd.js'

export default {
  name: 'Home',
  components: {
    // HelloWorld
  },
  data () {
    return {
      ofdData: null,
      ofdPrintApi: null
    }
  },
  created () {
    this.ofdPrintApi = new OFDPrintApi((progress) => {
      console.log(progress)
    })
  },
  mounted () {
    const viewer = document.getElementById('viewer')
    setRenderPageWidth(800)
    const that = this
    onWebassemblyRuntimeInitialized(() => {
      parseOfdDocument({
        ofd: '999.ofd',
        secret: '6wsz1zH2NHnRKuvH',
        success (res) {
          if (res.code === 0) {
            that.ofdData = res.data.ofd
            viewer.innerHTML = ''
            const divs = renderOfd(res.data.ofd, 0)
            for (const d of divs) {
              viewer.appendChild(d)
            }
          }
        }
      })
    })
  },
  methods: {
    print () {
      if (this.ofdData) {
        this.ofdPrintApi.setOfdData(this.ofdData)
        this.ofdPrintApi.startPrint()
      }
    }
  }
}
</script>
